<template>
    <div>
        <el-col :span="6"><el-input v-model="input" placeholder="姓名" prefix-icon="el-icon-search"></el-input></el-col>
        <el-button type="primary">查询</el-button>
        <el-table
            :data="tableData"
            stripe
            style="width: 80%">
            <el-table-column
                prop="name"
                label="姓名"
                width="140">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄"
                width="140">
            </el-table-column>
            <el-table-column
                prop="gender"
                label="性别"
                width="140">
            </el-table-column>
            <el-table-column
                prop="adress"
                label="地址"
                width="140">
            </el-table-column>
            <el-table-column
                prop="date"
                label="治愈日期"
                width="140" prefix-icon="el-icon-time">
            </el-table-column>
            <el-table-column
                label="操作"
                align="center">
                <el-button plain size="mini" @click="showDetails">详情</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[1, 2, 3]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="2">
        </el-pagination>
        <el-dialog title="详细信息" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名">
                        <el-input v-model="form.name" placeholder="姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-input v-model="form.gender" placeholder="性别"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="身份证号">
                        <el-input v-model="form.idcard" placeholder="身份证号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input v-model="form.age" placeholder="年龄"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="电话号码">
                        <el-input v-model="form.phone" placeholder="电话号码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="住院时间">
                        <el-input v-model="form.hospital_date" placeholder="住院时间"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="治疗医院">
                        <el-input v-model="form.hospital" placeholder="治疗医院"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="感染来源">
                        <el-input v-model="form.source" placeholder="感染来源"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="住址">
                        <el-input v-model="form.adress" placeholder="感染来源"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出院时间">
                        <el-input v-model="form.out_hospital_date" placeholder="出院时间"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" rows="4"></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
        input: '',
        tableData:null,
        currentPage4: 1,
        dialogFormVisible: false,
        form:{}
    }
  },
  created(){
      this.fetchData()
  },
  methods:{
    fetchData() {
        request({
            url: '../patient_curelist.json',
            method: 'get',
        }).then(response =>{
            this.tableData = response.data
        })
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
    },
    showDetails(){
        //第一步：显示对话框
        this.dialogFormVisible = true
        // 第二步：通过axios发送ajax请求，将数据返回
        request({
            url: '../patient_cure_list.json',
            method: 'get',
        }).then(response =>{  //第三步将返回的数据回显对话框
            this.form = response.data
        })
        },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
    }
  },
}
</script>
